<template>
  <div>
    <editor
      :api-key="apiKey"
      :init="init"
      v-model="contents"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import Editor from "@tinymce/tinymce-vue";
export default {
  name: "sEditor",
  components: {
    editor: Editor
  },
  data() {
    return {
      apiKey: "fmpe10wgtn5cy4tq0quwhxd21a2mb6z7pwuf0zsut09xk039", //key值从官网注册申请来的
      init: {},
      contents: ""
    };
  },
  props: {
    // 编辑器内容
    content: {
      type: String,
      default: ""
    }
  },
  created() {
    this._init();
  },
  watch: {
    content: function(val) {
      // 监听props中的属性
      this.contents = val;
    }
  },
  methods: {
    onEditorChange(e) {
      this.$emit("confirm_content", e.level.content);
    },
    _init() {
      const that = this;
      that.init = {
        height: 500, //富文本高度
        language_url: "tinymce_languages/langs/zh_CN.js", //中文包
        language: "zh_CN", //中文
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        elementpath: true, //禁用编辑器底部的状态栏
        statusbar: true, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 是否允许粘贴图像
        menubar: true, // 隐藏最上方menu
        fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
        file_picker_types: "image",
        images_upload_credentials: true,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste code help wordcount"
        ],
        toolbar:
          "fullscreen fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify image quicklink h2 h3 blockquote table numlist bullist preview",
        // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
        images_upload_handler: function(blobInfo, success, failure) {
          let data = new FormData();
          data.append("file", blobInfo.blob());
          that.$base.request(
            {
              that: that,
              method: "POST",
              url: "auth/upload/file_image",
              data: data
            },
            res => {
              console.log(res);
              if (res.code === 8888) {
                success(res.data.url);
              } else {
                failure("error");
              }
            }
          );
        }
      };
    }
  }
};
</script>
